!!!
- year = ["  ", "  "]
- semester = " "
%html
  %head
    %meta(charset="UTF-8")/
    %title 之江学院考试
    %link(rel="stylesheet" type="text/css" href="exam.css")/

  %body
    %h1 
      浙江工业大学之江学院20 #{year[0]} /20 #{year[1]} 学年
      %br/
      第 #{semester} 学期试卷

    %table(width='100%')
      %tr
        %td(colspan="2")  
          课程
          %span.filling20
        %td(colspan="2")
          班级
          %span.filling20
      %tr
        %td
          姓名
          %span.filling10
        %td(colspan="2")
          学号
          %span.filling20
        %td
          教师姓名
          %span.filling10

    %table(width='100%' border=1 rules='all')
      %tr
        %td 题序
        %td 一
        %td 二
        %td 三
        %td 四
        %td 五
        %td 总分
      %tr
        %td 计分
        %td
        %td
        %td
        %td
        %td
        %td

    %h2 填空题
    %ol
      %li
        根据标签是否成对出现，HTML标签分为：
        %span.filling 闭合标签
        、
        %span.filling 空标签
      %li
        根据显示形态，CSS把HTML标签分为：
        %span.filling 块状标签
        、
        %span.filling 行内标签
      %li
        HTML中常见的三种列表是：
        %span.filling 无序列表
        、
        %span.filling 有序列表
        、
        %span.filling 定义列表
      %li
        两个重要的包含框标签是
        %span.filling div
        、
        %span.filling span
        ；
        两者不会对文本的格式有直接影响。
      %li
        HTML代码
        %xmp.code <p><span>你</span>若安好便是晴天</p>
        中, 标签
        %span.filling span
        继承标签
        %span.filling p
        的样式。
      %li
        若用ID名定位网页元素
        %xmp.code <p id="xiangshi" class="poem">与君初相识，犹如故人归</p>
        则选择器为
        %span.filling #xiangshi
        。
      %li
        网页中图片的文字环绕效果是通过
        %span.filling ？
        实现的。
      %li
        当同一个网页元素被两组不同的CSS声明语句渲染时，根据选择器的
        %span.filling 优先级
        来选择最终使用的CSS样式。
      %li
        子元素默认具有父元素设置的属性。这叫
        %span.filling 继承
        。
      %li
        网页中每个元素根据
        %span.filling 盒
        模型显示。说出一种方法，来观察盒子大小：
        %span.filling ？
        。
      %li
        写出三种常用DOM节点：
        %span.filling 文档节点
        、
        %span.filling 元素节点
        、
        %span.filling 文本节点
        。文档节点的变量名是
        %span.filling ?
        。
      %li
        CSS 代码应该写在标签
        %span.filling ？
        里，而引用外部css文件要写在标签
        %span.filling ？
        里。JavaScript 代码或者外部js文件都应该写在标签
        %span.filling ？
        里。

    %h2 判断题
    %ol
      %li
        目前网页开发主要采用 HTML5
        %span.parenthesis
          %span.yes_no T
      %li
        CSS 可以嵌入 HTML 文件，也可以写在独立的文件中。
        %span.parenthesis
          %span.yes_no T
      %li
        超级链接默认具有下划线，而且这条下划线无法消除。
        %span.parenthesis
          %span.yes_no F
      %li
        盒子模型只在有背景图片的情况下才存在。
        %span.parenthesis
          %span.yes_no F
      %li
        默认设置下，背景图片一般只覆盖盒子模型的内边距部分（包括内容）。
        %span.parenthesis
          %span.yes_no T
      %li
        浮动一般影响横向显示，而不直接影响纵向显示。
        %span.parenthesis
          %span.yes_no T
      %li
        JavaScript 和 CSS 都用 link 标签导入外部文件。
        %span.parenthesis
          %span.yes_no F
      %li
        浮动时，子元素可能会超出父元素的显示范围。
        %span.parenthesis
          %span.yes_no F
      %li
        定位时，子元素可能会超出父元素的显示范围。
        %span.parenthesis
          %span.yes_no T
      %li
        浮动元素向左浮动时，会挤走同一行的所有非浮动元素。
        %span.parenthesis
          %span.yes_no F
      %li
        行内元素通常无法调整高宽，而块状元素可以。
        %span.parenthesis
          %span.yes_no T
      %li
        列表中列表项总是独立成一段显示，说明列表项是块状元素。
        %span.parenthesis
          %span.yes_no T
      %li
        浏览器窗口X-Y轴和解析几何中的X-Y轴方向一致。
        %span.parenthesis
          %span.yes_no F
      %li
        JavaScript代码一般是在当前位置执行，但可以操作HTML任何已经加载好的元素。
        %span.parenthesis
          %span.yes_no T
      %li
        写在 head 中的JavaScript可以在网页载入前执行。
        %span.parenthesis
          %span.yes_no T

      %li
        DOM中的元素节点大体上和HTML的标签一一对应。
        %span.parenthesis
          %span.yes_no ？

    %h2 选择题
    %ol
      %li
        HTML标签可分为哪两种标签？
        %span.parenthesis
          %span.choice C
        %ol(type="A")
          %li 空标签和非空标签
          %li 闭标签和开标签
          %li 闭合标签和空标签
          %li 双标签和单标签
      %li
        网页根标签是
        %span.parenthesis
          %span.choice A
        %ol(type="A")
          %li 
            %xmp <html>
          %li
            %xmp <head>
          %li
            %xmp <body>
          %li
            %xmp <meta>
      %li
        下面哪个标签书写是正确的？
        %span.parenthesis
          %span.choice B
        %ol(type="A")
          %li 
            %xmp <div>Hello world<div>
          %li 
            %xmp <b>Hello world</b>
          %li 
            %xmp <br>Hello world<br/>
          %li 
            %xmp <span Hello world/>
      %li
        一般CSS写在什么标签中?
        %span.parenthesis
          %span.choice D
        %ol(type="A")
          %li 
            %xmp <html>
          %li 
            %xmp <body>
          %li 
            %xmp <head>
          %li 
            %xmp <style>
      %li
        无序列表、有序列表、定义列表的标签分别是
        %span.parenthesis
          %span.choice B
        %ol(type="B")
          %li ol, ul, dl
          %li ul, ol, dl
          %li dl, ul, ol
          %li ol, ul, li
      %li
        CSS写法正确的是
        %span.parenthesis
          %span.choice B
        %ol(type="A")
          %li 
            %xmp span color: red;
          %li 
            %xmp div span {text-align: center; float: left;}
          %li 
            %xmp div, span {font-size=2em color=red}
          %li 
            %xmp div>span {text-shadow:1px,1px,3px;}
      %li
        应用样式
        %xmp.code
          p {color:blue;}
          span {font-size: large;
          font-weight: bold;}
          <p>
          <span>秦</span>时明月汉时关,万里长征人未还。但使龙城飞将在,不教胡马度阴山。
          </p>
        效果为：
        %span.parenthesis
          %span.choice B
        %ol(type="A")
          %li 
            %xmp 整首诗蓝色、加粗、放大
          %li 
            %xmp 整首诗蓝色，第一个字加粗、放大
          %li 
            %xmp 整首诗蓝色，第一个字加粗、放大但不是蓝色
          %li 
            %xmp 第一个字加粗、放大；其他字默认字体
      %li
        能精确定位到“秦”字的选择器是
        %span.parenthesis
          %span.choice C
        %xmp.code
          <div>
          <span class="head">秦</span>
          <span class="tail">时明月汉时关,万里长征人未还。但使龙城飞将在,不教胡马度阴山。
          </span>
          </div>
        %ol(type="A")
          %li 
            %xmp span
          %li 
            %xmp div span
          %li 
            %xmp div .head
          %li 
            %xmp div span .head
      %li
        无法定位到“秦”字的选择器是
        %span.parenthesis
          %span.choice D
        %xmp.code
          <div>
          <p>
          <span class="head">秦</span>
          <span class="tail">时明月汉时关,万里长征人未还。但使龙城飞将在,不教胡马度阴山。</span>
          </p>
          </div>
        %ol(type="A")
          %li 
            %xmp p>span
          %li 
            %xmp div span
          %li 
            %xmp p .head
          %li 
            %xmp div>.head
      %li
        下面哪个选择器的申明语句无法影响“独”字？
        %span.parenthesis
          %span.choice D
        %xmp.code
          <div>
          <span class="title">九月九日忆山东兄弟[唐] 王维</span>
          <p>
          <span class="head">独</span>
          <span class="tail">在异乡为异客，每逢佳节倍思亲。遥知兄弟登高处，遍插茱萸少一人。</span>
          </p>
          </div>
        %ol(type="A")
          %li 
            %xmp div .head
          %li 
            %xmp p>span
          %li 
            %xmp div>span
          %li 
            %xmp .title, .head
      %li
        CSS实现的是什么功能？
        %span.parenthesis
          %span.choice A
        %ol(type="A")
          %li 内容和样式分离
          %li 内容和资源分离
          %li 内容和源代码分离
          %li 内容和数据分离
      %li
        文本美化时, text-shadow 前三个代表大小的数值依次表示
        %span.parenthesis
          %span.choice D
        %ol(type="A")
          %li 阴影在x轴，y轴，z轴上的偏移
          %li 阴影在x轴，y轴上的偏移，颜色编码
          %li RGB颜色编码的三个分量
          %li 阴影在x轴，y轴上的偏移，模糊程度
      %li
        经常逛淘宝的同学知道，不用点击菜单，只要鼠标滑过菜单时，
        就会显示一些隐藏的商品信息或高亮一些暗淡的文字。
        %br/
        这主要是通过什么实现的？
        %span.parenthesis
          %span.choice D
        %ol(type="A")
          %li 设置text-decoration等文本修饰属性
          %li JavaScript动态特效
          %li CSS动画特效
          %li 设置鼠标悬停伪选择器

      %li
        图文混排的时候，文字围绕图片的效果是靠什么实现的？
        %span.parenthesis
          %span.choice C
        %ol(type="A")
          %li 选择器
          %li 盒子模型
          %li 浮动
          %li 定位
      %li
        B站主页导航栏其实是无序列表，为什么这个无序列表不是纵向排列，而是横向排列？
        %span.parenthesis
          %span.choice ？
        %ol(type="A")
          %li 网页太调皮了
          %li B站有毒
          %li 浏览器故障
          %li 浮动效果
      %li
        JavaScript实现的是什么功能？
        %span.parenthesis
          %span.choice B
        %ol(type="A")
          %li 内容和样式分离
          %li 内容和特效和互动功能的分离
          %li 内容和资源分离
          %li 内容和数据分离

      %li
        这是一段HTML代码，已知第二副图被设置为向左浮动，下面说法正确的是
        %span.parenthesis
          %span.choice A
        %xmp.code 文本0<img src="1.jpg">文本1<img src="2.jpg">文本2
        %ol(type="A")
          %li 第二副图会浮动到最左侧
          %li 第二副图会浮动到“文本1”的左侧，但不超过第一幅图
          %li 两幅图浮动到最左侧，但不改变两者顺序
          %li 两幅图浮动到最左侧，并交换顺序

      %li
        元素节点的nodeType返回值是
        %span.parenthesis
          %span.choice A
        %ol(type="A")
          %li 1
          %li 3
          %li 8
          %li 9

      %li
        与CSS鼠标悬停伪选择器:hover效果相当的鼠标事件定义是
        %span.parenthesis
          %span.choice A
        %ol(type="A")
          %li mouseover
          %li mouseout
          %li click
          %li dblclick

      %li
        百度首页输入本文然后点击搜索，就能显示一系列相关网页。这种人机互动效果是用什么技术实现的？
        %span.parenthesis
          %span.choice C
        %ol(type="A")
          %li CSS 伪选择器+动画效果
          %li CSS 布局
          %li 运行 JavaScript 脚本
          %li 注册 click 事件

      %li
        注册事件的一种正确写法是 (node指某个元素节点)
        %span.parenthesis
          %span.choice B
        %ol(type="A")
          %li node.click = function () {alert('hello')}
          %li node.onclick = function () {alert('hello')}
          %li node.onclick function () {alert('hello')}
          %li node.onclick(function () {alert('hello')})

      %li
        浏览器解析下面的HTML代码，会有什么特效
        %span.parenthesis
          %span.choice ？
        %xmp.code
          <h1>修改字母</h1>
          <span>A</span>

          <script type='text/javascript'>
          spans = document.getElementsByTagName('span')
          function f(){
          spans[0].innerText = 'B'
          }
          span.onclick = function () {}
          </script>
        %ol(type="A")
          %li 有特效，鼠标点击字母A变成B
          %li 没有特效，显示字母A
          %li 没有特效，显示字母B
          %li 没有特效，显示两个字母AB

    %h2 多项选择题
    %ol
      %li
        提高网页开发技能的练习方法有哪些？
        %span.parenthesis
          %span.choice ABCD
        %ol(type="A")
          %li 利用学会的HTML/CSS知识服务或娱乐自己，如写漂亮的笔记，日记，制作演示动画等。
          %li 阅读HTML/CSS特效素材，并在此基础上修改。
          %li 观看教学视频和演示程序，观察HTML/CSS源码的渲染效果。
          %li 阅读真实网页源码，学习别人的设计方法和风格。
      %li
        下面哪个标签产生斜体效果？
        %span.parenthesis
          %span.choice AC
        %ol(type="A")
          %li 
            %xmp <i>
          %li 
            %xmp <b>
          %li 
            %xmp <em>
          %li 
            %xmp <strong>
      %li
        下面哪些标签产生加粗效果？
        %span.parenthesis
          %span.choice BD
        %ol(type="A")
          %li 
            %xmp <i>
          %li 
            %xmp <b>
          %li 
            %xmp <em>
          %li 
            %xmp <strong>
      %li
        下面哪些元素可以设置为超链接？
        %span.parenthesis
          %span.choice ABCD
        %ol(type="A")
          %li 文本
          %li 图片
          %li 图文混排的文章
          %li 视频
      %li
        下面哪些是行内元素？
        %span.parenthesis
          %span.choice AD
        %ol(type="A")
          %li 普通文本
          %li div标签
          %li p标签
          %li 图片
      %li
        下面哪些是块状标签
        %span.parenthesis
          %span.choice BD
        %ol(type="A")
          %li span
          %li div
          %li img
          %li article
      %li
        下面哪些属性可以帮助我们观察盒子？
        %span.parenthesis
          %span.choice AB
        %ol(type="A")
          %li background
          %li border
          %li margin
          %li padding
      %li
        下面哪些方法可以实现文本居中？
        %xmp <div>这是一段测试文本</div>
        %span.parenthesis
          %span.choice ABD
        %ol(type="A")
          %li div 标签换成 center 标签
          %li 用 CSS, 设置 text-align: center 属性
          %li 在文本左侧输入充分多的空格
          %li 定位
      %li 
        下面THML中，诗句第一个字 "你" 会继承哪几个标签的样式
        %span.parenthesis
          %span.choice BC
        %xmp.code
          <div>
          <p>
          <span class="title">断章</span>
          <br/>
          作者：<i>卞之琳</i><br/>
          <span class="head">你</span>站在桥上看风景，<br/>
          看风景的人在楼上看你。<br/>
          明月装饰了你的窗子，<br/>
          你装饰了别人的梦。<br/>
          </p>
          </div>
        %ol(type="A")
          %li
            %xmp <i>
          %li
            %xmp <div>
          %li
            %xmp <p>
          %li
            %xmp <span class="title">

      %li 
        下面是B站首页css代码片段。仅凭这段代码，可以推断出
        %xmp.code
          body {
          margin=0;
          padding=0;
          }
          \...
          \.international-footer a {
          text-decoration: none;
          }
        %span.parenthesis
          %span.choice ？
        %ol(type="A")
          %li 一般情况下，body的背景图片和浏览器不会留缝隙。
          %li 所有超链接没有下划线
          %li 某些超链接（在class=international-footer的标签里）没有下划线
          %li 信息不够，无法做出任何推断

      %li 
        JavaScript定义一个函数有哪些方法？
        %span.parenthesis
          %span.choice ABC
        %ol(type="A")
          %li 使用关键字 function
          %li 创建 Function 对象
          %li 定义匿名函数
          %li 像数学中那样定义, 如 f(x)=x+1

      %li 
        JavaScript遍历一个数组有哪些方法？
        %span.parenthesis
          %span.choice ABCD
        %ol(type="A")
          %li for循环
          %li for-in循环
          %li forEach方法
          %li 若存在简单的映射关系，可用map

      %li 
        BOM 中有哪些常用节点
        %span.parenthesis
          %span.choice BCD
        %ol(type="A")
          %li 标签节点
          %li 元素节点
          %li 文本节点
          %li 文档节点

      %li
        如何获得所有网页中的无序列表
        %span.parenthesis
          %span.choice AB
        %ol(type="A")
          %li document.body.getElementsByTagName('ul')
          %li document.getElementsByTagName('ul')
          %li document.getElementsByClassName('ul')
          %li document.getElementsByTagName('ol')

      %li
        哪些方法可以获得网页中的图像
        %span.parenthesis
          %span.choice ACD
        %ol(type="A")
          %li document.images
          %li document.body.images
          %li document.getElementsByTagName('img')
          %li document.body.getElementsByTagName('img')


      %li
        下面是B站首页导航栏列表（已经简化）。怎样能合理地把“游戏中心”改为“学习中心”？(ul为下面的ul元素节点)
        %xmp.code
          <ul>
          <li>主站</li>
          <li>番剧</li>
          <li>游戏中心</li>
          <li>直播</li>
          <li>会员购</li>
          </ul>
        %span.parenthesis
          %span.choice ?
        %ol(type="A")
          %li li=ul.getElementsByTagName('li')[2]; li.innerText="学习中心"
          %li ul.getElementsByTagName('li')[2].innerText="学习中心"
          %li li=ul.getElementsByTagName('li')[3]; li.innerText="学习中心"
          %li ul.getElementsByTagName('li')[3].innerText="学习中心"

    %h2 简答题(20分)
    %ol
      %li 
        将下面百度上的一组新闻写成有序列表
        %pre
          31省新增本土病例85例:河北82例
          佩洛西:众议院将第二次弹劾特朗普
          河北新增49例本地无症状感染者
          金正恩被推举为朝鲜劳动党总书记
        .solve
          %xmp.code
            <ol>
            <li>31省新增本土病例85例:河北82例</li>
            <li>佩洛西:众议院将第二次弹劾特朗普</li>
            <li>河北新增49例本地无症状感染者</li>
            <li>金正恩被推举为朝鲜劳动党总书记</li>
            </ol>

      %li 
        用CSS，实现文本居中: 大标题居中，段落中第二行居中并设置红色。
        %xmp.code
          <h1 class="c">我看见一个杀手</h1>
          <p>在大街上，我看见一个杀手
          <span class="c">他信步向我走来<span>
          <span class="d">缓缓地，把我的心杀死了<span>
          </p>
        .solve
          %xmp.code
            \.c {text-align: center}
            span.c {color: blue}  /*等价答案 p>.c {color: blue}*/

      %li 
        下面是一段文章。第一个词放大到3倍，加粗，其余文字环绕。
        %xmp.code
          <article>
          <div class="title">荷塘月色</div>
          <address>朱自清</address>
          <p>
          <span class="moon">月光</span>如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。
          叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。
          虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。
          月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。
          塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
          </p>
          </article>
        .solve
          CSS代码：
          %xmp.code
            \.moon {float: left;
            font-size: 4em;
            font-weight: bold;}

      %li 
        下面是一段诗。准备一张图片，如poem.jpg。给这断文字添加背景图片，文字在图片中居中，合理控制上下边距。
        %xmp.code
          <div class='poem'>
          我总是想些无关紧要的事<br/>
          比如宇宙的目的，熬夜与猝死的关系<br/>
          你是否曾爱我
          </div>
        .solve
          CSS代码：
          %xmp.code
            \.poem {background-image: url("poem.jpg");
            text-align: center;
            padding-top: 2em; /*只要有设置就是对的*/
            padding-bottom: 5em;
            position: relative; /*初学者不要求*/}
          注：注释不是必须的。

      %li
        下面是B站首页导航栏列表（已经简化）。已知这是文档节点中第一个无序列表节点。怎样能合理地把“游戏中心”改为“学习资料”？
        %xmp.code
          <ul>
          <li>主站</li>
          <li>番剧</li>
          <li>游戏中心</li>
          <li>直播</li>
          <li>会员购</li>
          </ul>  
        .solve
          %xmp.code
            ul = document.getElementsByTagName('ul')[0]  // 获取文档中第一个列表
            li = ul.getElementsByTagName('li')[2] // 获取列表中第三个列表项
            li.innerText="学习中心" // 修改列表项内部文本
          注：注释不是必须的。

      -# %li 
      -#   下面是一首古诗。准备一张图片，如poem.jpg。给这首诗添加背景图片，文字在图片中居中，合理控制上下边距。（8分）
      -#   %xmp.code
      -#     <pre class='poem'>
      -#     《游山西村》 
      -#     宋·陆游 
      -#     莫笑农家腊酒浑，丰年留客足鸡豚。 
      -#     山重水复疑无路，柳暗花明又一村。 
      -#     萧鼓追随春社近，衣冠简朴古风存。
      -#     从今若许闲乘月，拄杖无时夜叩门。
      -#     </pre>
      -#   .solve
      -#     %xmp.code
      -#       \.poem {background-image: url("poem.jpg");
      -#       text-align: center;
      -#       padding-top: 2em;
      -#       padding-bottom: 5em;
      -#       position: relative;}